<!--
 作者 : 唐梓元
 日期 : 2019-05-11
 版本 : 1.0
 描述 :确认框
 使用 : <cmConfirm  msg='xxx错误'></cmConfirm>
 参数 :title 默认是'错误'，msg 默认空置，代表错误信息
 -->
<template>
  <div >
    <div class="myRating" >
      <div class="ratContent">
        <div class="title" v-text="title"></div>
        <div class="msg" v-text="msg"></div>
        <div class="foot" ><div @click="submit" :class="mousedown1?'mouseDown':''"  @mousedown="def_mousedown" @mouseleave="def_mouseleave">{{confirm}}</div></div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "cmCofirm.vue",
    props:{
      title:{
        type:String,
        default:'错误'
      },
      msg:String,
      confirm:{
        type:String,
        default:'确定'
      }
    },
    data(){
      return{
        mousedown1:false
      }
    },
    methods:{
      submit(){
        this.$emit("confirm1")
      },
      def_mousedown(){

          this.mousedown1=true

      },
      def_mouseleave(){

          this.mousedown1=false
      }
    }
  }

</script>

<style scoped>
  .mouseDown{
    background-color: #f2f2f2;
  }
.myRating{
    position: fixed;
    width: 100%;
    height: 100%;
    background-color:rgba(111,111,111,0.8);
    left: 0;
    top:0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;

  }
.myRating .ratContent{
    width: 18rem;
    min-height: 9.5rem;
    background-color: white;
    line-height: 100%;
    text-align: center;
    border-radius: 4px;
  }
.myRating .ratContent .title{
    height:3rem;
    line-height: 3.9rem;
    font-size: 1.2rem;
    color: black;
  }

 .myRating .ratContent .foot div{
    width: 100%;
    text-align: center;
    border-top: 1px solid rgba(111,111,111,0.2);
    height: 2.5rem;
    line-height: 2.5rem;
    /*color: #57bbfa;*/
   color: #6bff53;
    font-size: 0.9rem;
  }
.msg{
  margin: 0;
    padding-left: 1rem;
    width:17rem;
    min-height: 4rem;
  padding-top: 0.2rem;
    line-height: 1.4rem;
    overflow: hidden;
    font-size: 0.9rem;
    color: #8f8f94;
  padding-bottom: 0.3rem;
  }
.myRating .ratContent .foot div:hover{
  color: #57bbfa;
  cursor: pointer;
}


  </style>
